<template>
	<view  style="width: 100%;overflow: hidden;">
	<main-wrapper :bg-list="banners" bg-standout >
	<!-- <view class="content" style="padding-top: 80px;"> -->
		<!-- <image class="nav-bg" :src="recommendBanner" mode="widthFix" /> -->
		<view style="padding-bottom: 80px;">

			<announcement-board :title="protocol.name" style="width: 100%">
				<scroll-view scroll-y="true" style="height: 112rpx;">
					<text style="word-wrap: break-word;overflow-wrap: break-word;">{{protocol.content}}{{protocol.content}}</text>
				</scroll-view>
				<!-- 购买赏品后请到赏袋申请发货，运费10元，商品满6件包邮(含大陆偏远地区) -->
				<!-- 用户申请发货后平台于15天内发货。抽赏存在概率性请合理消费，未成年人禁止消费。 -->
			</announcement-board>


			<view class="section-box">
				<section-title title="Z元素商城" class="gap-top"  style="margin-top: 10px;"/>
				<text v-if="false" @click=""></text>
				<text @click="gotoMall" class="gray-content" v-if="shopgoods.length<3">更多</text>
			</view>
			<view class="products-list">
				<template v-for="(e, index) in shopgoods" :key="index">
					<product-item :title="e.name" :pic="e.main_photo" :price="e.price" badge="" :stock="e.stock"
						@click="gotoDetail(e)" />
				</template>
			</view>
			<view class="section-box">
				<section-title title="Z元素福利" class="gap-top" />
			</view>
			<view class="products-list-column">
				<view v-for="(e, index) in welare" :key="index">
					<view class="weal-box">
						<product-item :title="e.name" :pic="e.main_photo" :price="e.price" badge=""
							@click="gotoZPicker(e)" />
						<!-- <view class="btn-box">
							<button class="btn" @click="gotoZPicker(e)">去抽奖</button>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<tarbar :active="0"></tarbar>
	</main-wrapper>
	</view>
</template>

<script>
	import MainWrapper from '@/wxcomponents/main-wrapper'
	import AnnouncementBoard from '@/wxcomponents/announcement-board'
	import SectionTitle from '@/wxcomponents/section-title'
	import productItem from '@/wxcomponents/product-item'
	import CouponDialogContent from '@/wxcomponents/coupon-dialog-content'
	import ProductsSwiper from '@/wxcomponents/products-swiper'
	import tarbar from '@/wxcomponents/tarbar'
	import {
		zproductlist,
		zweallist,
		protocolone
	} from "@/api/z_meta"
  import { listBanner } from '@/api/banner';

  export default {
		data() {
			return {
				shopgoods: [],
				welare: [],
				banners: [],
				protocol:{
					name:"",
					content:""
				}
			}
		},
		components: {
			AnnouncementBoard,
			SectionTitle,
			productItem,
			CouponDialogContent,
			ProductsSwiper,
			tarbar,
			MainWrapper
		},
		onShow: async function(options) {
			await this.getprotocolone()
			await this.getzproductlist()
			await this.getzweallist()
			await this.loadRecommendBanner()
		},
		methods: {
			gotoMall() {
				uni.navigateTo({
					url: '/pages/subPackage/mall'
				})
			},
			getzweallist() {
				console.log("4444")
				zweallist().then(res => {
					this.welare = res.data.items
				})
			},
			getzproductlist() {
				zproductlist().then(res => {
					this.shopgoods = res.data.items || []
				})
			},
			getprotocolone() {
				protocolone({type:'Z元素顶部通知'}).then(res => {
					this.protocol = res.data.protocol
				})
			},
			gotoZPicker(item) {
				uni.navigateTo({
					url: `/pages/subPackage/z-picker?id=${item.id}`
				})
			},
			gotoDetail(item) {
				console.log('---------gotoDetail')
				uni.navigateTo({
					url: `/pages/subPackage/malldetail?id=${item.id}`
				})
			},
      async loadRecommendBanner() {
        const params = {
          type: 'Z元素顶部'
        }
        const res = await listBanner(params)
        const data = res.data || {}
        const items = data.items || []
        const banners = []
        for (let i = 0; i < items.length; i ++) {
          banners.push(items[i]['img'])
        }
        this.banners = banners
      }
		}
	}
</script>

<style lang="scss">
	@import 'src/static/scss/common';

	page {
		background-color: #0A050B;
	}

	.gap-top {
		margin-top: 26px;
	}

	.nav-bg {
		// width: 100vw;
		// margin-left: -12px;
		position: absolute;
		z-index: -1;
		width: 100vw;
		margin-left: -12px;
		top: 0;
	}

	.content {
		display: flex;
		flex-direction: column;
		padding-left: 12px;
		padding-right: 12px;
		padding-bottom: 20px;
		// padding-bottom: var(--tabbar-height, 70px);
	}

	.products-list {
		margin-top: 12px;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 10px;
		flex-direction: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.products-list::-webkit-scrollbar {
		display: none;
		height: 0;
		width: 0;
		color: transparent;
	}


	.products-list-column {
		margin-top: 12px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		gap: 10px;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.section-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}

	.weal-box {
		display: flex;
		flex-direction: column;
		justify-content: center;

		.btn-box {
			margin-top: 20rpx;

			.btn {
				color: #FFFFFF;
				font-size: 24rpx;
				width: 140rpx;
				height: 60rpx;
				background: linear-gradient(to right, rgba(216, 90, 231, 100), rgba(50, 118, 237, 100));
			}
		}
	}
</style>
